<template>
  <div class="detail-container">
    <div class="detail-container__left">
      <div class="article-container">
        <div class="article__header">
          <yun-avatar :src="articleDetail.cover" v-if="articleDetail.projectId" :name="articleDetail.userNick" size="60px" border-r="4px" style="margin-right: 16px"></yun-avatar>
          <div class="header-info">
            <p class="title">{{articleDetail.projectName}}</p>
            <div class="infos">
              <div class="info-left">
                <div class="icon-box">
                  <p class="icon" v-if="articleDetail.viewNumber>20">
                    <yun-icon name="hot" size="12px" color="#fff"></yun-icon>
                  </p>
                  <p class="icon" style="background-color: #00AAE6" v-if="articleDetail.priority>0">
                    <yun-icon name="top" size="12px" color="#fff"></yun-icon>
                  </p>

<!--                  <p class="icon">-->
<!--                    <yun-icon name="like2" size="12px" color="#fff"></yun-icon>-->
<!--                  </p>-->
                </div>
                <div class="label-box">
                  <p v-for="(val,index) in articleDetail.tags" :key="val.tagId">{{val.tagName}}</p>
                </div>
              </div>
              <div class="info-right">
                <p class="left">
                  {{articleDetail.userNick}}<span>·</span>{{dataConvert2(articleDetail.createTime)}}
                </p>
                <div class="right">
<!--                  <div class="icon-box">-->
<!--                    <yun-icon name="star" size="12px" pb="7px"  color="#ccc"></yun-icon>-->
<!--                    <span>4</span>-->
<!--                  </div>-->
                  <div class="icon-box">
                    <yun-icon name="like1" size="12px"  pb="7px" color="#ccc"></yun-icon>
                    <span>{{articleDetail.praiseNum}}</span>
                  </div>
                  <div class="icon-box">
                    <yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
                    <span>{{articleDetail.viewNumber}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="article__introduce">{{articleDetail.projectDescription}}</p>
        <div class="article__content markdown-body" v-html="articleDetail.contentHtml">
        </div>


        <div class="article__footer">
          <div class="project" v-if="articleDetail.projectId">
            <p>
              <yun-icon name="home" size="12px" style="margin-right: 5px"></yun-icon>
              <a target="_blank" :href="articleDetail.homeLink">项目首页</a>
            </p>
            <p>
              <yun-icon name="project" size="12px" style="margin-right: 5px"></yun-icon>项目文档
            </p>
            <p>
              <yun-icon name="download" size="12px" style="margin-right: 5px"></yun-icon>项目下载
            </p>
          </div>
        </div>

        <div :class="returnArticleLikeClass" @click="clickToPraise">
          <yun-icon name="like_egg" class="egg"></yun-icon>
          <yun-icon name="like1" class="heart"></yun-icon>
          <p class="num">{{articleDetail.praiseNum}}</p>
        </div>
        <div class="article__praise-member" :style="{justifyContent:praiseList.length<=9?'center':'flex-start'}">
          <yun-avatar class="more-member" :key="val.userId" :style="{marginRight:(index+1)%10===0?'0px':'28px',marginLeft:index===0&&praiseList.length<=9?'28px':'0px'}" size="40px" borderR="20px" v-for="(val,index) in praiseList" :userId="val.userId" :src="val.userAvatar" :name="val.nickName"></yun-avatar>
          <p class="more-member" v-if="!showAllPraise" @click="dataGetAllPraiseList">更多</p>
        </div>

        <div class="article__footer">
          <p></p>
          <p class="report" @click="$router.push({path:'/web/report',query:{type:'project',id:articleDetail.projectId}})">举报</p>
        </div>
      </div>
      <comment-con :id="articleDetail.projectId" type="project"></comment-con>
    </div>
    <div class="detail-container__right">
      <user-card :isFollow="articleDetail.followedAuthor" :userId="articleDetail.userId"></user-card>
      <card-container style="margin-top:16px" title="相关项目推荐" label="换一换" more="更多">
      </card-container>
    </div>
    <div class="article-option">
      <div class="option-item" @click="MessageAlert">
        <yun-icon name="star" class="star"></yun-icon>
      </div>

      <div class="option-item"  @click="clickToPraise">
        <yun-icon name="like1"  :class="returnOptionLikeClass"></yun-icon>
      </div>

      <div class="option-item" @click="MessageAlert">
        <yun-icon name="comment" class="comment"></yun-icon>
      </div>
      <div class="share-word">分享</div>

      <div class="option-item" @click="MessageAlert">
        <embed src="../../../assets/svg/weibo.svg" width="18" height="21"
               type="image/svg+xml"
               pluginspage="http://www.adobe.com/svg/viewer/install/" />
      </div>

      <div class="option-item" @click="MessageAlert">
        <embed src="../../../assets/svg/wechat.svg" width="18" height="21"
               type="image/svg+xml"
               pluginspage="http://www.adobe.com/svg/viewer/install/" />
      </div>

      <div class="option-item" @click="MessageAlert">
        <embed src="../../../assets/svg/qq.svg" width="18" height="21"
               type="image/svg+xml"
               pluginspage="http://www.adobe.com/svg/viewer/install/" />
      </div>
    </div>
  </div>
</template>


<script>

  import UserCard from '../../../components/pc/userCard';
  import SocialContactCard from '../../../components/pc/socialContactCard';
  import CardContainer from '../../../components/pc/cardContainer';
  import CommentCon from '../../../components/pc/comment/commentCon';
  import config from '../../../action/config'
  import {dateConvert} from "../../../action/utils/dataConvert";

  import hljs from 'highlight.js'
  import {globalBus} from "../../../components/common/globalBus";

  export default {
    async asyncData ({ $axios ,params}) {
      let articleDetail = await $axios.$get(config.api.get.Project.detail+params.id);
      return {articleDetail:articleDetail.data}
    },
    head () {
      return {
        title: this.articleDetail.projectName + ' - 云里云外开源社区',
        meta: [
          { hid: 'description', name: 'description', content:  this.articleDetail.projectDescription },
          { hid: 'keywords', name: 'keywords', content:this.tagString  }
        ]
      }
    },

    data(){
      return{
        commentContent:'',
        commentList:[],
        tagString:'',

        praiseList:[],
        praiseTotal:0,
        showAllPraise:true

      }
    },

    computed:{
      returnArticleLikeClass(){
        return this.articleDetail.praised?'article__like2':'article__like1'
      },
      returnOptionLikeClass(){
        return this.articleDetail.praised?'likeActive':'like'
      }
    },

    created(){

      this.dataGetPraiseList();

      globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.projectName,'project');
      if(this.articleDetail.tags){
        this.articleDetail.tags.map((val,index)=>{
          if(index<this.articleDetail.tags.length-1){
            this.tagString =this.tagString +  val.tagName +','

          }else{
            this.tagString =this.tagString +  val.tagName

          }

        })

      }else{
        this.tagString = '开源项目,开源社区'
      }
    },

    mounted(){
      this.highlightCode();
    },

    methods:{
      dataConvert2(time){
        return dateConvert(time)
      },

      MessageAlert(){
        this.$message({
          type:'info',
          message:'该功能尚未启用'
        })
      },
      highlightCode () {
        if(process.browser){
          this.$hljs.initHighlightingOnLoad();
          this.$hljs.initLineNumbersOnLoad({
            singleLine: true
          });
          const preEl = document.querySelectorAll('pre');
          preEl.forEach((el) => {
            this.$hljs.highlightBlock(el)
          //  this.$hljs.lineNumbersBlock(el);
          })
        }

      },

      clickToPraise(){
        if(this.articleDetail.praised){
          this.dataDeletePraise();
        }else{
          this.dataPostPraise()
        }

      },

      dataGetPraiseList(){
        this.$axios.$get(config.api.post.ProjectPraise.praise+this.articleDetail.projectId+'/praises',{
          params:{
            page:1,
            size:9,
          }
        }).then((response)=>{

          if(response.code===0){
            this.showAllPraise = response.data.totalRecords <= 9;
            this.praiseList = response.data.dataList;
            this.praiseTotal = response.data.totalRecords;
          }
        })

      },
      dataGetAllPraiseList(){
        this.$axios.$get(config.api.post.ProjectPraise.praise+this.articleDetail.projectId+'/praises',{
          params:{
            page:1,
            size:this.praiseTotal,
          }
        }).then((response)=>{

          if(response.code===0){
            this.showAllPraise = true;
            this.praiseList = response.data.dataList;
            this.praiseTotal = response.data.totalRecords;
          }
        })

      },

      dataPostPraise(){
        this.$axios.$post(config.api.post.ProjectPraise.praise+this.articleDetail.projectId+'/praise').then((response)=>{

          if(response.code===0){
            this.$message({
              type:'success',
              message:'点赞成功'
            })
            this.dataGetPraiseList();
            this.articleDetail.praised = true;
            this.articleDetail.praiseNum = this.articleDetail.praiseNum +1;
          }else if(response.code===1000){
            this.$message({
              type:'warning',
              message:'请在登陆后操作'
            })
          }
        })

      },

      dataDeletePraise(){
        this.$axios.$delete(config.api.delete.ProjectPraise.praise+this.articleDetail.projectId+'/praise').then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:'取消点赞'
            })
            this.dataGetPraiseList();
            this.articleDetail.praised = false;
            this.articleDetail.praiseNum = this.articleDetail.praiseNum -1;
          }else if(response.code===1000){
            this.$message({
              type:'warning',
              message:'请在登陆后操作'
            })
          }
        })
      }
    },

    components:{
      UserCard,SocialContactCard,CardContainer,CommentCon
    },
  }


</script>


<style lang="scss" >
  .detail-container {


    width: $pageWidth;
    margin: 16*$length auto;
    @extend %flex-row-spb;
    align-items: flex-start;
    @extend %detail-container;
  }
</style>
<style lang="css">@import "assets/github-markdown.min.css";</style>
